import QtQuick 2.0
import QtQuick.Controls 2.14
import "../../../basic"

Item {

    Flickable {
        id: flick
        contentHeight: 2200
        clip: true
        anchors.fill: parent
        ScrollBar.vertical: ScrollBar { // 自定义滚动条
            id: cusScrollBar
            anchors.right: parent.right
            anchors.rightMargin: 5
            width: 10
            //            policy: cusScrollBar.ScrollBarAsNeeded
            contentItem: Rectangle {
                visible: parent.active
                implicitWidth: 10
                implicitHeight: 10
                radius: 4
                color: "#42424b"
            }
        }
        Column {
            anchors.fill: parent
            anchors.topMargin: 30
            clip: true
            spacing: 30
            // 轮播图
            CarouseUmage { }
            // 官方歌单
            OfficalSings { }
            // 最新音乐
            Item {
                id: recentMusicRoot
                anchors.left: parent.left
                anchors.right: parent.right
                height: 450
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        leftIniImg.visible = true
                        rightIniImg.visible = true
                    }
                    onExited: {
                        leftIniImg.visible = false
                        rightIniImg.visible = false
                    }
                }
                Label {
                    id: titleLabel
                    text: qsTr("最新音乐")
                    font.bold: true
                    color: "white"
                    font.family: BasicConfig.heiTiFont
                    font.pixelSize: 24
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.leftMargin: 30
                }
                Item {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: titleLabel.bottom
                    anchors.topMargin: 10
                    height: parent.height
                }
                Image {
                    id: leftIniImg
                    visible: false
                    enabled: false
                    anchors.left: parent.left
                    y: 150
                    source: "qrc:/img/Resources/cherryPick/leftArrow.png"
                    width: 50
                    height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            slideToAni.start();
                            console.log("动画，左边被按下")
                        }
                    }
                }
                Image {
                    id: rightIniImg
//                    mirror: true
                    visible: false
                    enabled: true
                    anchors.right: parent.right
                    y: 150
                    source: "qrc:/img/Resources/cherryPick/rightArrow.png"
                    width: 50
                    height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            slideToAni.start();
                            console.log("动画，右边被按下")
                        }
                    }
                }
                NumberAnimation {
                    id: slideToAni
                    target: singerGrid
                    property: "x"
                    duration: 500
                    easing.type: Easing.InOutQuad
                    from: singerGrid.x < 0 ? -500 : singerGrid.x
                    to: singerGrid.x < 0 ? 0 : -500
                    alwaysRunToEnd: true
                    onStopped: {
                        rightIniImg.enabled = singerGrid.x === 0
                        leftIniImg.enabled = !rightIniImg.enabled
                    }
                }
                Item {
                    id: singerRect
                    anchors.left: parent.left
                    anchors.right: rightIniImg.left
                    anchors.top: titleLabel.top
                    anchors.topMargin: 50
                    height: 400
                    anchors.leftMargin: 50
                    clip: true
                    Grid {
                        id: singerGrid
                        columns: 3
                        width: parent.width
                        height: parent.height
                        spacing: 20
                        ListModel {
                            id: listmodel
                            ListElement { singName:"音乐1";discription:"";singer:"歌手名字1";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐2";discription:"";singer:"歌手名字2";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐3";discription:"";singer:"歌手名字3";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐4";discription:"";singer:"歌手名字4";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐5";discription:"";singer:"歌手名字5";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐6";discription:"";singer:"歌手名字6";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐7";discription:"";singer:"歌手名字7";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐8";discription:"";singer:"歌手名字8";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                            ListElement { singName:"音乐9";discription:"";singer:"歌手名字9";svipLabel:"沉浸声";origin:"原唱";playnum:"";playTime:"";score:""}
                        }
                        Repeater {
                            id: rep
                            model: listmodel
                            Rectangle {
                                width: 470
                                height: 100
                                radius: 10
                                color: "transparent"
                                MouseArea {
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    onEntered: {
                                        parent.color = "#212127"
                                        playImg.visible = true
                                        aternativeRow.visible = true
                                        leftIniImg.visible = true
                                        rightIniImg.visible = true
                                    }
                                    onExited: {
                                        parent.color = "transparent"
                                        playImg.visible = false
                                        aternativeRow.visible = false
                                        leftIniImg.visible = false
                                        rightIniImg.visible = false
                                    }
                                }
                                Image {
                                    id: img
                                    anchors.left: parent.left
                                    anchors.leftMargin: 10
                                    anchors.verticalCenter: parent.verticalCenter
                                    scale: 1.1
                                    source: `qrc:/img/Resources/cherryPick/recentMusic/pic${index+1}.png`
                                    Image {
                                        id: playImg
                                        visible: false
                                        scale: 0.3
                                        opacity: 0.8
                                        source: "qrc:/img/Resources/cherryPick/officalSing/play.png"
                                        anchors.centerIn: parent
                                    }
                                }
                                Item {
                                    anchors.left: img.right
                                    anchors.leftMargin: 10
                                    anchors.top: parent.top
                                    anchors.right: parent.right
                                    anchors.bottom: parent.bottom
                                    Column {
                                        anchors.verticalCenter: parent.verticalCenter
                                        spacing: 20
                                        Label {
                                            text: singName
                                            font.bold: true
                                            font.pixelSize: 20
                                            font.family: BasicConfig.heiTiFont
                                            color: "white"
                                        }
                                        Row {
                                            spacing: 5
                                            Rectangle {
                                                width: svipLabelLaebl.implicitWidth + 8
                                                height: svipLabelLaebl.implicitHeight
                                                color: "transparent"
                                                border.width: 1
                                                border.color: "#cba24e"
                                                visible: svipLabel !== ""
                                                Label {
                                                    id: svipLabelLaebl
                                                    text: svipLabel
                                                    color: "#cba24e"
                                                    font.pixelSize: 10
                                                    font.family: BasicConfig.commFont
                                                    anchors.centerIn: parent
                                                }
                                            }
                                            Rectangle {
                                                width: originLabel.implicitWidth + 8
                                                height: originLabel.implicitHeight
                                                color: "transparent"
                                                border.width: 1
                                                border.color: "#cba24e"
                                                visible: origin !== ""
                                                Label {
                                                    id: originLabel
                                                    text: origin
                                                    color: "#cba24e"
                                                    font.pixelSize: 10
                                                    font.family: BasicConfig.commFont
                                                    anchors.centerIn: parent
                                                }
                                            }
                                            Label {
                                                text: singer
                                                font.bold: true
                                                font.pixelSize: 15
                                                font.family: BasicConfig.heiTiFont
                                                color: "white"
                                            }
                                        }
                                    }
                                    Row {
                                        id: aternativeRow
                                        visible: false
                                        spacing: 20
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.right: parent.right
                                        anchors.rightMargin: 20
                                        Image {
                                            source: "qrc:/img/Resources/cherryPick/recentMusic/downlaod.png"
                                            width: 30
                                            height: 30
                                        }
                                        Image {
                                            source: "qrc:/img/Resources/cherryPick/recentMusic/like.png"
                                            width: 30
                                            height: 30
                                        }
                                        Image {
                                            source: "/img/Resources/cherryPick/recentMusic/more.png"
                                            width: 30
                                            height: 30
                                        }
                                    }
                                }
                            }
                        }
                    }
                }



            }
        }
    }
}
